<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<el-page-header :content="pageTitle" @back="$router.back()" />
		</el-card>
		<el-card class="mt-4 !border-none" shadow="never">
			<el-descriptions class="mt-4" title="基本信息" :column="3" border>
				<el-descriptions-item label="头像" class-name="label-content-break" label-class-name="w-[130px]">
					<el-image
						class="w-[30px] h-[30px] flex items-center justify-center"
						:src="formData.avatar"
						preview-teleported="true"
						:preview-src-list="[formData.avatar]"
						fit="contain"
					/>
				</el-descriptions-item>
				<el-descriptions-item label="账号" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.account }}
				</el-descriptions-item>
				<el-descriptions-item label="昵称" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.nickname }}
				</el-descriptions-item>
				<el-descriptions-item label="手机号" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.mobile }}
				</el-descriptions-item>
				<el-descriptions-item label="真实姓名" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.group_name }}
				</el-descriptions-item>
				<el-descriptions-item label="生日" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.birthday }}
				</el-descriptions-item>
				<el-descriptions-item label="身份证号" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.id_card }}
				</el-descriptions-item>
				<el-descriptions-item label="性别" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.sex_desc }}
				</el-descriptions-item>
				<el-descriptions-item label="邮箱" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.email }}
				</el-descriptions-item>
			</el-descriptions>
			<el-descriptions class="mt-4" title="用户概况" :column="3" border>
				<el-descriptions-item label="来源" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.channel_names }}
				</el-descriptions-item>
				<el-descriptions-item label="分组" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.group_name }}
				</el-descriptions-item>
				<el-descriptions-item label="状态" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.status_desc }}
				</el-descriptions-item>
				<el-descriptions-item label="添加时间" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.create_time }}
				</el-descriptions-item>
				<el-descriptions-item label="最后登录ip" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.last_ip }}
				</el-descriptions-item>
				<el-descriptions-item label="最后登录时间" class-name="label-content-break" label-class-name="w-[130px]">
					{{ formData.last_time_desc }}
				</el-descriptions-item>
			</el-descriptions>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="userInfo">
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { userDetail } from '/@/api/user/user';
import { groupAll } from '/@/api/user/group';

const pageTitle = computed(() => {
	return '用户详情';
});

const route = useRoute();

const formData = reactive({
	id: 0,
	group_name: '',
	account: '',
	nickname: '',
	real_name: '',
	birthday: '',
	id_card: '',
	avatar: '',
	sex_desc: '',
	mobile: '',
	email: '',
	channel_names: '',
	last_ip: '',
	last_time_desc: '',
	create_time: '',
	status_desc: '',
});

const cateOptionsData = ref([]);

const setOptionsData = async () => {
	cateOptionsData.value = await groupAll();
};

const setFormData = async (id: any) => {
	const data = await userDetail({
		id: id,
	});

	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
};

onMounted(() => {
	if (route.query.id) {
		setFormData(route.query.id);
	}
	setOptionsData();
});
</script>
<style lang="scss">
.label-content-break {
	width: 200px;
}
</style>
